import {  Button,message,InputNumber } from 'antd';
import React,{ useEffect, useState } from 'react';
import { history } from 'umi';
import cardStyles from '../index.less';
import { ChangeFare} from '@/service/order/index';
import styles from './index.less';
import {getList} from '@/service/configuration/index'
import { GlobalState } from '@/models/global';
import CahngeCar from '../../../list/columns/changeCar'

export interface FixedBarProps {
  global: GlobalState;
  dispatch: any;
  location: any;
}
function ChangeCarIndex(props:any) {
  const {info,datas} = props
  const [deduction,setDeduction] = useState<any[]>([]) // 扣款列表
  const [deductionAll,setdeductionAll] = useState(0) // 扣款总额
  const [reduction,setReduction] = useState([]) // 减免列表
  const [reductionAll,setreductionAll] = useState(0) // 减免总额
  const [allNum,setAllNum] = useState(0)
  const [allNumState,setAllNumState] = useState('1')
  const [importTransferItem, setImportTransferItem] = useState(false); // 导入换车费用项
  const calculation = ()=>{
    if(deductionAll>reductionAll){
      setAllNumState('1')
      setAllNum(Number((deductionAll-reductionAll).toFixed(2)))
      // setAllNum(deductionAll-reductionAll)
    }else{
      setAllNumState('2')
      setAllNum(Number((reductionAll-deductionAll).toFixed(2)))
      // setAllNum(reductionAll-deductionAll)
    }
  } // 计算需补交还是退
  useEffect(()=>{
    calculation()
  },[deductionAll,reductionAll])
  useEffect(()=>{
    const list1:any = []
    const list2:any = []
    const list3:any ={expenseItemType:1,current:1,size:99999,businessType:2,status:2}
    const list4:any  ={expenseItemType:2,current:1,size:99999,businessType:2,status:2}
    getList(list3).then((res:any)=>{
      if(res?.success){
          res?.data?.records.forEach((res1:any)=>{
            const obj1 ={
              title:'',
              value:'',
              type:2
            }
            obj1.title = res1?.expenseItemName
            list1.push(obj1)
          })
          setDeduction(list1)
      }

    })
    getList(list4).then((res:any)=>{
      if(res?.success){
        res?.data?.records.forEach((res2:any)=>{
          const obj ={
            title:'',
            value:'',
            type:2
          }
          obj.title = res2?.expenseItemName
          list2.push(obj)
        })
        setReduction(list2)
      }
    })
  },[])
  const onFinish = () => {
    const obj:any = {
      quondamOrderCarId:info,
      collectFeeList:[],
      deductionFeeList:[],
    }
    deduction?.forEach((res:any)=>{
      const obj1 = {
        feeItemName:res?.title,
        feeItemAmount:res?.value,
        feeManipuility:res?.type
      }
      obj.collectFeeList.push(obj1)
    })
    reduction?.forEach((res:any)=>{
      const obj2:any = {
        feeItemName:res?.title,
        feeItemAmount:res?.value,
        feeManipuility:res?.type
      }
      obj.deductionFeeList.push(obj2)
    })
    obj.estimatedTime = datas?.estimatedTime
    obj.applyRemark = datas?.applyRemark
    delete obj.orderCarId
      ChangeFare(obj).then((res:any)=>{
        if(res.success){
            history.goBack()
          }
      })

  };
  // 扣款输入
  const deductionchange = (value:any,text:any)=>{
    if(text){
      const data =/^(?!0+(?:.0+)?$)(?:[0-9]\d*|0)(?:.\d{1,2})?$/
      if(data.test(text)){
        deduction?.forEach((res:any)=>{
          if(res?.title === value?.title){
              res.value = text
              }
          })
          setDeduction(deduction)
          let all = 0
          deduction?.forEach((res)=>{
            all = Number(res?.value)+all
          })
          setdeductionAll(Number(all.toFixed(2)))
          calculation()
      }else{
        message.error('请输入数字，最多2位小数')
      }
    }else{
      deduction?.forEach((res:any)=>{
        if(res?.title === value?.title){
          res.value = ''
        }
      })
      setDeduction(deduction)
      let all = 0
        deduction?.forEach((res:any)=>{
          all = Number(res?.value)+all
        })
        setdeductionAll(Number(all.toFixed(2)))
        calculation()
    }
    
   
  }
  // 减免输入
  const reductionChange = (value:any,text:any)=>{
    if(text){
      const data =/^(?!0+(?:.0+)?$)(?:[0-9]\d*|0)(?:.\d{1,2})?$/
      if(data.test(text)){
        reduction?.forEach((res:any)=>{
          if(res?.title === value?.title){
            res.value = text
          }
        })
        setReduction(reduction)
        let all = 0
        reduction?.forEach((res:any)=>{
          all = Number(res?.value)+all
        })
        setreductionAll(Number(all.toFixed(2)))
        calculation()
      }else{
        message.error('请输入数字，最多2位小数')
      }
    }else{
      reduction?.forEach((res:any)=>{
        if(res?.title === value?.title){
          res.value = ''
        }
      })
      setReduction(reduction)
      let all = 0
      reduction?.forEach((res:any)=>{
          all = Number(res?.value)+all
        })
        setreductionAll(Number(all.toFixed(2)))
        calculation()
    }
    
    
  }
  // 取消
  const onCancel = () => {
    history.goBack();
  };
  // 打开批量费用项导入弹框
  const setIsModalOpen =()=>{
    setImportTransferItem(true);
  }
  // 关闭弹框回调
  const sunChange = (value:any)=>{
    if(value){
      setImportTransferItem(false)
      history.push('/order/list')
    }
}
  return (
    <div className={cardStyles.card}>
      <div style={{height:'55px',borderBottom: '1px solid rgba(189, 191, 191, 0.2)',lineHeight:'55px'}}>
        <p style={{float:'left',fontWeight: 'bold',fontSize:"16px",marginLeft:'30px',marginRight:'10px',marginBottom: '5px'}}>换车费用明细</p>
        <p style={{float:'left'}}>
            <Button type="primary" onClick={setIsModalOpen}>批量导入换车费用项</Button>
        </p>
        <p style={{float:'right'}}>{allNumState ==='1'?'需要客户补缴金额/元':'需要退还客户金额/元'}:{allNum}</p>
      </div>
      <div className={styles.box}>
        <p className={styles.title}>扣款费用项</p>
        <div className={styles.line}>
          {deduction?.map((res:any)=>(
              <div className={styles.line_box}>
              <p className={styles.text}>{res?.title}:</p>
              <p className={styles.value}><InputNumber onChange={(e)=>deductionchange(res,e)} value={res?.value} disabled={res.statue} step="0.01" /></p>
            </div>
          ))}
        </div>
        <div className={styles.all}>
          <span>合计：</span>
          <span>{deductionAll}</span>
        </div>
      </div>


      <div className={styles.box}>
        <p className={styles.title}>减免费用项</p>
        <div className={styles.line}>
        {reduction?.map((res:any)=>(
              <div className={styles.line_box}>
              <p className={styles.text}>{res?.title}:</p>
              <p className={styles.value}><InputNumber onChange={(text)=>reductionChange(res,text)} value={res?.value} disabled={res.statue} step="0.01" /></p>
            </div>
          ))}
        </div>
        <div className={styles.all}>
          <span>合计：</span>
          <span>{reductionAll}</span>
        </div>
      </div>
      <div className={styles.foot}>
        <Button shape="round" onClick={onCancel} style={{marginRight:'8px'}}>取消</Button>
        <Button shape="round" type="primary" htmlType="submit" onClick={onFinish}>提交</Button>
      </div>
      {/* 导入换车费用项 */}
      <CahngeCar info={importTransferItem} sunchange = {sunChange}/>
    </div>
  );
}
export default ChangeCarIndex;
